<template>
  <el-row > 
    <div  @dblclick="handleDblClick">
      <xdh-form ref="form"  v-bind="form" :model="form" @submit.native.prevent.stop="preventSubmit" @keyup.native.13="handelEnterSubmit" label-width="80px">
        <div class="xdh-form__body" ref="body">
          <template v-for="item in fields">
            <el-col :key="item.prop">
              <div class="mask" @click.stop="handleEditItem(item)">
             <xdh-form-item 
                     v-bind="item"
                     :class="{'is-helper':showHelper===item, 'is-select':editField===item}"
                     @mouseenter.native="handleMouseEnter(item)"
                     @mouseleave.native="handleMouseLeave(item)">

                    <span class="depend-info" v-show="item.depend">依赖：{{item.depend}}</span>
                    <div class="handle-btns">
                      <i class="el-icon-delete" @click.stop="removeItem(item)"></i>
                      <!-- <i class="layui-icon layui-icon-screen-full" @mousedown.stop="mousedown" @mouseup.stop="mouseup" @mousemove="mousemove(item)" ></i> -->
                    </div> 
              </Xdh-form-item>
              </div>
            </el-col>
          </template>
        </div>
      </xdh-form>
    
    </div>
  </el-row>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'
  import Sortable from 'sortablejs'

  import XdhForm from '@/widgets/xdh-form'
  import XdhFormItem from '@/widgets/xdh-form/xdh-form-item'
  

  export default {
    data() {
      return {
        showHelper: null,
        dragging: false,
        ismousedown:false,
      }
    },
    components:{
      XdhForm,
      XdhFormItem
    },
    computed: {
      ...mapState({
        form: state => state.formModel,
        fields: state => state.fields,
        editField: state => state.editField
      }),
      ...mapGetters(['model']),
      classes() {
        return {
          'is-empty': this.fields.length === 0
        }
      }
    },
    methods: {
      clone(data) {
        console.log('clone')
        return JSON.parse(JSON.stringify(data))
      },
      handleDrop(item, index) {
       console.log(this.form,this.fields,this.editField)
        if (item) {
          const defaultName = `${item.type}_${new Date().getTime()}`
          const newItem = {
            ...item,
            label: item.title,
            prop: defaultName,
            value: item.value
          }
          delete newItem.title
          this.$store.commit('addField', {field: newItem, index: index})
        }
      },
      handleMouseEnter(item) {
        console.log('handleMouseEnter',item)
        if (this.dragging) return
        this.showHelper = item
      },
      handleMouseLeave(item) {
        this.showHelper = null
      },
      handleEditItem(item) {
        console.log('handleEditItem')
        this.$store.commit('setEditField', item)
      },
      removeItem(item) {
        const isDepend = !!this.fields.find(n => n.depend === item.prop)
        if (isDepend) {
          this.$message.warning('该字段被其他字段依赖，不能删除')
          return
        }
        this.$store.commit('setEditField', null)
        this.$store.commit('removeField', item)
      },
      handleDblClick() {
        this.$store.commit('setEditField', null)
      },
      // mousedown(){
      //     this.ismousedown = true;
      // },
      // mouseup(){
      //   this.ismousedown = false;
      // },
      // mousemove(e){
      //   if(!this.ismousedown) {
      //     return false;
      //   }
      //   if(e.xs > 1) {
      //     e.xs -= 1;
      //   }
      //   this.$store.commit('setEditField', e)
      //    this.ismousedown = false;


      // }
    },
    mounted() {
      let isAdd = false;
    
      document.getElementsByClassName('xdh-form__body')[0].style.height = '90vh';
      this.sortable = new Sortable(this.$refs.body, {
        group: 'component',
        animation: 200,
        filter: '.xdh-form__footer',
        onStart: () => {
          console.log('onStart')
          this.dragging = true
          this.showHelper = null
        },
        onEnd: (e) => {
          console.log('onEnd',e)
          this.dragging = false
        },
        onSort: (e) => {
          console.log('onSort',this.fields)
          // 添加也会触发onSort， 用个变量去来区分
          if (!isAdd) {
            this.$store.commit('sortFields', e)
          }
          isAdd = false
        },
        onAdd: (e) => {
          
          const item = e.item.__item__
          if (item) {
            isAdd = true
            this.handleDrop(item, e.newIndex)
          }
          this.$nextTick(() => {
            e.item.parentNode.removeChild(e.item)
          })
        }
      })
    },
    created() {
      
    },
    beforeDestroy() {
      if (this.sortable) {
        this.sortable.destroy()
      }
    }
  }
</script>

<style scoped>
.tzy-form{
    min-height:90vh;
}

</style>